{% extends "base.html" %}

{% block title %}学生管理 - ExamPulse{% endblock %}

{% block extra_css %}
<!-- 引入马卡龙风格的CSS文件 -->
<link rel="stylesheet" href="/static/users/css/student-list.css">
{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-6">
    <!-- 学生管理卡片 -->
    <div class="student-card card">
        <!-- 顶部操作区：优化flex布局，确保标题与按钮同行 -->
        <div class="card-header">
            <div class="header-operation-bar d-flex justify-content-between align-items-center gap-4">
                <!-- 标题：考研学生管理 -->
                <h5 class="title-text mb-0 flex-shrink-0">
                    <i class="fas fa-users me-2"></i>考研学生管理
                </h5>
                <!-- 搜索+添加按钮容器 -->
                <div class="action-group d-flex align-items-center gap-3 flex-wrap">
                    <!-- 搜索框 -->
                    <form method="get" action="{% url 'users:student_search' %}" class="search-form flex-grow-1 max-w-md">
                        <div class="input-group">
                            <input type="text" name="q" class="form-control"
                                   placeholder="搜索学生姓名/目标院校..."
                                   value="{{ search_query|default:'' }}">
                            <button class="btn btn-outline-secondary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                    <!-- 添加按钮 -->
                    <a href="{% url 'users:student_create' %}" class="btn btn-macaron-primary flex-shrink-0">
                        <i class="fas fa-plus me-1"></i>添加学生
                    </a>
                </div>
            </div>
        </div>

        <!-- 表格内容区 -->
        <div class="card-body p-0">
            {% if students %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>考研战数</th>
                                <th>学历背景</th>
                                <th>本科院校</th>
                                <th>目标院校</th>
                                <th>创建时间</th>
                                <th style="width: 180px;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for student in students %}
                            <tr data-student-id="{{ student.id }}">
                                <td>
                                    <i class="fas fa-user-circle me-2"></i>
                                    <strong>{{ student.name }}</strong>
                                </td>
                                <td><span class="badge badge-macaron">{{ student.attempt_count }}</span></td>
                                <td>{{ student.education_background }}</td>
                                <td>{{ student.undergraduate_school|default:"<span class='text-muted'>未填写</span>"|safe }}</td>
                                <td>{{ student.target_school|default:"<span class='text-muted'>未设置</span>"|safe }}</td>
                                <td>{{ student.created_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'users:student_detail' student.id %}" class="btn btn-macaron-info">
                                            <i class="fas fa-eye"></i> 详情
                                        </a>
                                        <a href="{% url 'users:student_edit' student.id %}" class="btn btn-macaron-edit">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <!-- 【修复】删除按钮直接跳转到独立删除页面，不触发模态框 -->
                                        <a href="{% url 'users:student_delete' student.id %}" class="btn btn-macaron-delete">
                                            <i class="fas fa-trash"></i> 删除
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- 分页控件 -->
                {% if is_paginated %}
                <div class="px-4 py-3 border-top border-light">
                    {% include "users/includes/pagination.html" with page_obj=page_obj search_query=search_query %}
                </div>
                {% endif %}

            {% else %}
                <!-- 空数据状态：优化添加按钮加号大小 -->
                <div class="empty-state">
                    <i class="fas fa-users fa-3x mb-3"></i>
                    <p class="text-muted">暂无学生数据</p>
                    <a href="{% url 'users:student_create' %}" class="btn btn-macaron-primary empty-add-btn">
                        <i class="fas fa-plus me-1"></i>添加第一个学生
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 引入列表页专用的JS文件 -->
<script src="/static/users/js/student-list.js"></script>
{% endblock %}